﻿@page "/tts"

@if (isLoading)
{
    <Loading />
}
else
{
    <div class="post-wrap">
        <div class="tts-box">
            <div class="tts-textarea-wrap">
                <textarea maxlength="200" placeholder="请输入需要合成的文案" @oninput="TextChanged" @bind="@content"></textarea>
                <div class="tts-tip">
                    @(textLength == 0 ? "最多" : "您还")可以输入<span class="tts-tip-num">@(200 - textLength)</span>个字
                </div>
                <div class="tts-btn tts-play">
                    <span title="播放" @onclick="PlayAsync">🔊</span>
                </div>
                <div class="tts-btn tts-demo">
                    <span title="随机示例" @onclick="(async () => await SettingRandomContentAsync())">🔄</span>
                </div>
                <div class="tts-btn tts-clear">
                    <span title="清空" @onclick="ClearContent">❌</span>
                </div>
            </div>
            <div class="tts-setting">
                <div class="tts-setting-title">发音</div>
                <div class="tts-setting-value">
                    <label><input type="radio" name="per" @onclick="(() => per = 0)" />标准女</label>
                    <label><input type="radio" name="per" @onclick="(() => per = 1)" />标准男</label>
                    <label><input type="radio" name="per" @onclick="(() => per = 3)" />情感男</label>
                    <label><input type="radio" name="per" @onclick="(() => per = 4)" checked="checked" />情感女</label>
                </div>
            </div>
            <div class="tts-setting">
                <div class="tts-setting-title">语速</div>
                <div class="tts-setting-value">
                    <input type="range" min="0" max="9" @bind="@spd" @bind:event="onchange" step="1" title="@spd" />
                    <i>@spd</i>
                </div>
            </div>
            <div class="tts-setting">
                <div class="tts-setting-title">音调</div>
                <div class="tts-setting-value">
                    <input type="range" min="0" max="9" @bind="@pit" @bind:event="onchange" step="1" title="@pit" />
                    <i>@pit</i>
                </div>
            </div>
            <div class="tts-setting">
                <div class="tts-setting-title">音量</div>
                <div class="tts-setting-value">
                    <input type="range" min="0" max="15" @bind="@vol" @bind:event="onchange" step="1" title="@vol" />
                    <i>@vol</i>
                </div>
            </div>
        </div>
    </div>
    @if (tts != null)
    {
        <Audio tts="@tts" />
    }
}

@code {
    /// <summary>
    /// 加载中
    /// </summary>
    private bool isLoading = true;

    /// <summary>
    /// 生成的语音播放链接
    /// </summary>
    private string tts;

    /// <summary>
    /// 文本长度
    /// </summary>
    private int textLength = 0;

    /// <summary>
    /// 文本内容
    /// </summary>
    private string content;

    /// <summary>
    /// 4个参数
    /// </summary>
    private int spd = 5, pit = 5, vol = 7, per = 4;

    /// <summary>
    /// 初始化
    /// </summary>
    /// <returns></returns>
    protected override async Task OnInitializedAsync()
    {
        await Common.SetTitleAsync("语音合成");

        await SettingRandomContentAsync();
        isLoading = false;
    }

    /// <summary>
    /// 输入文本内容后事件处理
    /// </summary>
    /// <param name="e"></param>
    private void TextChanged(ChangeEventArgs e)
    {
        content = (string)e.Value;
        textLength = content.Length;
    }

    /// <summary>
    /// 生成语音，播放
    /// </summary>
    /// <returns></returns>
    private async Task PlayAsync()
    {
        if (string.IsNullOrEmpty(content)) return;

        tts = $"https://api2.meowv.com/common/tts?content={content}&spd={spd}&pit={pit}&vol={vol}&per={per}";

        await Common.InvokeAsync("window.func.playAudio");
    }

    /// <summary>
    /// 设置随机一条毒鸡汤内容
    /// </summary>
    /// <returns></returns>
    private async Task SettingRandomContentAsync()
    {
        var soul = await Http.GetFromJsonAsync<ServiceResult<string>>("/soul");
        content = soul.Result;
        textLength = content.Length;
    }

    /// <summary>
    /// 清空内容
    /// </summary>
    private void ClearContent()
    {
        content = string.Empty;
        textLength = 0;
    }
}